<template>
  <div id="app">
    <!-- <Inventory></Inventory> -->
    <ul id="bottom">
      <li v-for="(item,index) in arr" :key="index" @click="fn_data(index)">
        <router-link :to="item.luyou">
          <img :src="item.img" v-if="item.isActive">
          <img :src="item.inActive" v-else>
          <p>{{item.name}}</p>
        </router-link>
      </li>
    </ul>
    <router-view />
  </div>
</template>
<script>
// import Inventory from '../src/views/Inventory.vue'
export default {
  components:{
    // Inventory
  },
  name:"App",
  data(){
    return {
      flag:false,
      arr:[
        {
          name:"首页",
          img:"https://image1.suning.cn/uimg/cms/img/157543975265772267.png?from=mobile",
          inActive:'//image.suning.cn/uimg/cms/img/157105696599538235.png',
          luyou:"/",
          isActive:true
        },
        {
          name:"分类",
          img:"//image.suning.cn/uimg/cms/img/157105701326237728.png",
          inActive:'//image.suning.cn/uimg/cms/img/157105701015391606.png',
          luyou:"/classify",
          isActive:false
        },
        {
          name:"必抢清单",
          img:"//image.suning.cn/uimg/cms/img/157105715273415124.png",
          inActive:'//image.suning.cn/uimg/cms/img/157105715014136982.png',
          luyou:"/inventory",
          isActive:false
        },
        {
          name:"购物车",
          img:"//image.suning.cn/uimg/cms/img/157105763151658248.png",
          inActive:'https://image3.suning.cn/uimg/cms/img/157543979328589256.png?from=mobile',
          luyou:"/shopping",
          isActive:false
        },
        {
          name:"我的易购",
          img:"//image.suning.cn/uimg/cms/img/157105701326237728.png",
          inActive:'//image.suning.cn/uimg/cms/img/157105768303272975.png',
          luyou:"/mine",
          isActive:true
        }
      ]
    }
  },
  mounted(){
    this.fn_data(0);
  },
  methods:{
    fn_data(index){
      this.arr.forEach(item => {
        item.isActive = false;
      })
      console.log(index);
      this.arr[index].isActive = true;
    }
  }
}
</script>
<style scoped>
*{
  margin: 0;
  padding: 0;
}
 html,body{
  width: 7.5rem;
  overflow-x: hidden;
  background: #F5F5F9;
  /* font-size: 16px; */
}
ul,li{
  list-style: none;
  font-size: .16rem;
}
#app{
  width: 7.5rem;
}
#bottom{
  width: 100%;
  height: 1.2rem;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  padding-top: .2rem;
  z-index: 99;
}
#bottom>li{
  width: 20%;
  text-align: center;
  display: flex;
  flex-direction: column;
}
a{
  text-decoration: none;
  color: #666666;
}
img{
  display: block;
  width: 50%;
  height: 50%;
  text-align: center;
  margin: 0 auto;
}
p{
  padding-top: .1rem;
}
.active{
  color:#000;
  font-weight: bold;
}
</style>
